<template>
    <div class="wrapper">
        <el-card class="box">
            <el-avatar :size="100" :src="avatar" class="avatar">
                <img src="/user.webp" />
            </el-avatar>
            <div class="box2">
                <h3 class="title">{{ getTime() }}好!{{ userName }}</h3>
                <p class="sub_title">Cola课题管理系统</p>
            </div>
        </el-card>
        <img src="/leishen-logo.jpg" class="bg_img" />
    </div>
</template>

<script setup lang="ts">
// 引入昂库
import useUserStore from "@/store/modules/user";
import { storeToRefs } from "pinia";
// 引入时间转换方法
import { getTime } from "@/utils/time";
const userStore = useUserStore();
// 获取数据
const { userName, avatar } = storeToRefs(userStore);
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    :deep(.el-card__body) {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .box2 {
            margin-left: 20px;
            .title {
                font-size: 30px;
                font-weight: 900;
                margin-bottom: 20px;
            }

            .sub_title {
                font-style: italic;
                color: skyblue;
            }
        }
    }
}

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .bg_img {
        margin-top: 100px;
        object-fit: cover;
        width: 30%;
    }
}
</style>
